<template>
  <el-card v-loading="loading">
    <options>
      <span slot="left">部门</span>
      <el-checkbox-group slot="right" v-model="checkedArr.departmentChecks">
        <el-checkbox v-for="item of department" :key="item.id" :label="item.id" style="height: 40px;line-height: 40px;">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
    </options>
    <options>
      <span slot="left">社保城市</span>
      <el-checkbox-group slot="right" v-model="checkedArr.socialSecurityChecks">
        <el-checkbox v-for="item of allCity" :key="item.id" :label="item.id" style="height: 40px;line-height: 40px;">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
    </options>
    <options>
      <span slot="left">公积金城市</span>
      <el-checkbox-group slot="right" v-model="checkedArr.providentFundChecks">
        <el-checkbox v-for="item of allCity" :key="item.id" :label="item.id" style="height: 40px;line-height: 40px;">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
    </options>
  </el-card>
</template>

<script>
import { getCityList } from '@/api/social'
import { getAllList } from '@/api/department'
import options from './options'
export default {
  name: 'Select',
  components: {
    options
  },
  props: {
    checkedArr: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // departmentChecks: [], // 部门列表
      department: [],
      // socialSecurityChecks: [], // 社保列表
      allCity: [],
      // providentFundChecks: [], // 公积金列表
      loading: false
    }
  },
  created() {
    this.getAllDepartment()
    this.getAllSocialCity()
  },
  methods: {
    // 获取所有部门
    async getAllDepartment() {
      const { depts } = await getAllList()
      this.department = depts
    },
    // 获取所有的社保城市和公积金城市以及部门列表
    async getAllSocialCity() {
      this.loading = true
      try {
        this.allCity = await getCityList()
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style>

</style>
